CSS 布局(上):display&z-index

文档流的概念

文档流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,或者说在排布过程中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
但是,在某些情况下,元素会脱离文档流,他们不会按照既定的顺序进行排布,而是按照指定的规则在文档流中浮动。


display

display属性,是用来设置元素的布局方式,就是元素如何在页面上展示。

display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

display可以有很多可选的值,但是,“似乎”最重要的就只有我加粗的这几个。比较常用的也是这几个。下面就分别介绍这几个值的含义。

display:inline 行内元素

  • 默认宽度为内容宽度
  • 不可设置宽高
  • 元素之间同行显示,内部会换行
  • 如果一个元素被指定为display:inline,那么这个元素就是一个行内元素。
  • 行内元素的意思,就是这个元素能和其他元素在同一行显示,比如以下两个元素都是display:inline,他们在同一行显示:

  • 内部会换行:虽然inline是一个行内元素,但是它自己内部是会换行的

  • 不可设置宽高:就是无法为一个行内元素设置宽(width)高(height),inline元素的行高完全是由元素本身内容决定的

  • 默认是display:inline的元素有:span, a, label, cite, em, …

display:block 块级元素

  • 默认宽度为父元素的宽度
  • 可设置宽高
  • 元素之间换行显示
  • 默认宽度为父元素的宽度,指的是,子元素的margin+border+padding+content的宽度和等于父元素content-box的宽度。默认高度是元素内容高度,值得注意。如果没有内容,那么高度即为 0。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
width: 200px;
height: 200px;
margin: 10px;
padding: 50px;
background-color: lightseagreen;
box-sizing: border-box;
}
.child {
height: 20px;
padding: 20px;
margin: 10px;
background-color: white;
}
![](https://jackie-image.oss-cn-hangzhou.aliyuncs.com/16-12-12/76855013-file_1481555964594_d399.png)
  • 默认是display:block的元素有:div, p, h1-h6, ul, form

    * * *
    
    ### `display:inline-block` 行块元素
    
    > *   默认宽度为内容宽度
    
    • 可设置宽高
    • 元素之间,同行显示
    • 后续元素宽度超过边界之后就会整块换行
  • display:inline-block综合了行级元素和块级元素的特点。

  • 默认宽度为内容宽度,在未设置元素宽度的时候,元素的默认宽度就是内容的宽度,这和inline元素保持一致。但又同时是可设置宽高的。
  • 元素之间,同行显示,超过边界换行
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .parent {
    width: 100px;
    height: 60px;
    background-color: lightseagreen;
    }
    .children {
    display: inline-block;
    width: 30px;
    height: 10px;
    background-color: white;
    outline: 1px solid lightblue;
    }
  • 默认是display:inline-block的元素有:input, textarea, selelct, button, …
  • display:inline-block一直有一个历史遗留问题。就是间隙问题,就比如下面这段代码,你可以复制这段代码到本地,你会发现,将content-box之外的所有内容都设为 0,元素之间仍旧有一个间隙,令人百思不得其解。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.parent {
width: 200px;
height: 100px;
background-color: lightseagreen;
}
.element {
display: inline-block;
width: 80px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
background-color: white;
}
</style>
</head>
<body>
<div class="parent">
<span class="element"></span>
<span class="element"></span>
<span class="element"></span>
<span class="element"></span>
</div>
</body>
</html>

mark
关于它的历史和解决方案,可以参照这篇文章inline-block 前世今生,以及这篇文章提到了很多解决方案:去除 inline-block 元素间间距的 N 种方法

  • 我个人而言,比较推崇在父元素上加上font-size:0的方法。但是这个方法也有局限性,因为要为每个子元素都再设置一遍font-size

display:none 不显示

  • 指的是元素不出现在文档流中,和变透明是不一样的,display:none是完完全全的消失

定位偏移属性


top bottom left right

  • 当元素的position属性不是static的时候(下文中会讲),或者添加了float属性,那么就可以使用标题中的这四个属性来进行定位偏移
  • 默认是auto,也就是topleft都为 0,对齐到父元素content-box的左上角,以此类推。
  • 这四个值都可以设置